<script setup>
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import * as echarts from 'echarts'
import { CaretLeft, CaretRight } from '@element-plus/icons-vue'
import {
  getScreenAlterDetail,
  getScreenAlterTotal,
} from '@/api/screen/home/index.js'
import { ElMessage } from 'element-plus'
import {
  getDeviceTypeStatistic,
  getWarnTendency,
} from '@/api/screen/home/index'
import { parkPageList } from '@/api/manager/dataManage/park.js'
import mitter from '@/utils/eventBus'

defineOptions({
  name: 'Left',
})

defineProps({
  isExpanded: Boolean,
})

const currentDate = new Date()

const recentDays = ref([])

// 循环生成最近的 10 天日期
for (let i = 0; i < 10; i++) {
  const date = new Date(currentDate)
  date.setDate(currentDate.getDate() - i)
  recentDays.value.push(date)
}

const formattedDates = recentDays.value.map((date) => {
  // const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${month}-${day}`
})

const xAxisData = []

const parkList = ref([])
const deviceData = [41, 30, 38, 18, 40, 40]
const warningData = [24, 34, 23, 26, 25, 29]

const deviceChartRef = ref(null)

const deviceOptions = {
  backgroundColor: 'transparent',
  legend: {
    right: '3%',
    top: '0',
    itemWidth: 12,
    itemHeight: 12,
    icon: 'square',
    textStyle: { color: '#DAECFF' },
    data: [
      {
        name: '设备数量',
      },
      // {
      //   name: '当前报警设备数',
      // },
    ],
  },
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      let tipStr = ''
      let totalNum = 0
      for (let i = 0; i < params.length; i++) {
        totalNum += params[i].value
        if (params[i].seriesName !== '合计') {
          tipStr += params[i].seriesName + '：' + params[i].value + '</br>'
        }
      }
      for (let i = 0; i < params.length; i++) {
        totalNum += params[i].value
        if (params[i].seriesName === '合计') {
          tipStr += '合计：' + totalNum
        }
      }
      return tipStr
    },
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  grid: {
    left: '15%',
    right: '10%',
    bottom: '50',
    top: '25%',
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLine: {
      lineStyle: {
        color: '#0D3562',
      },
    },

    axisLabel: {
      show: true,
      color: '#C4EAFF',
      fontSize: 12,
      interval: 0,
      rotate: 30,
    },
    show: true,
  },
  yAxis: [
    {
      axisLine: {
        show: false,
      },
      type: 'value',
      axisLabel: {
        show: true,
        color: '#C4EAFF',
        fontSize: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#1E303F',
          width: 1,
          type: 'dashed',
        },
      },
    },
    {
      axisLine: {
        show: false,
      },
      type: 'value',
      axisLabel: {
        show: true,
        color: '#C4EAFF',
        fontSize: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#1E303F',
          width: 1,
          type: 'dashed',
        },
      },
    },
  ],
  series: [
    {
      data: [],
      name: '设备数量',
      type: 'bar',
      barWidth: 15,
      barGap: '100%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          {
            offset: 0,
            color: '#2B4C73', // 起始颜色
          },
          {
            offset: 1,
            color: '#178FFF', // 结束颜色
          },
        ]),
      },
    },
    // {
    //   name: '当前报警设备数',
    //   data: warningData,
    //   yAxisIndex: 1,
    //   type: 'line',
    //   barGap: '100%',
    //   lineStyle: {
    //     color: '#F7AD69',
    //   },
    //   itemStyle: {
    //     color: '#F7AD69',
    //     borderColor: '#F7AD69',
    //     borderWidth: 2,
    //   },
    //   label: {
    //     show: true,
    //     position: 'top',
    //     distance: 10,
    //     color: '#C4EAFF',
    //     fontSize: 12,
    //     formatter: (params) => {
    //       const index = xAxisData.findIndex((item) => params.name === item)
    //       return deviceData[index] + warningData[index]
    //     },
    //   },
    // },
  ],
}

const eventInfoList = ref([
  {
    name: '当前报警总数',
    value: '0',
    color: '#fff',
    key: 'total',
  },
  {
    name: '本日报警数',
    value: '0',
    color: '#fff',
    key: 'todaytotal',
  },
  {
    name: '本月报警数',
    value: '0',
    color: '#fff',
    key: 'monthtotal',
  },
])

const getEventInfoListData = () => {
  getScreenAlterTotal({}).then((res) => {
    if (res.success) {
      eventInfoList.value =
        eventInfoList.value?.map((item) => {
          return {
            ...item,
            value: res.data[item.key],
          }
        }) || []
    } else {
      ElMessage.error(res.message)
    }
  })
}

let diff = [
  { name: '外来人员', value: 10, unit: '' },
  { name: '人员闯入', value: 90, unit: '' },
  { name: '抽烟', value: 80, unit: '' },
  { name: '攀爬', value: 70, unit: '' },
  { name: '烟雾及烟火', value: 60, unit: '' },
  { name: '安全通道占用', value: 78, unit: '' },
]

const classificationOptions = {
  backgroundColor: 'transparent',
  tooltip: {
    show: true,
    trigger: 'item',
    padding: [8, 15],
    backgroundColor: 'rgba(12, 51, 115,0.8)',
    borderColor: 'rgba(3, 11, 44, 0.5)',
    textStyle: {
      color: 'rgba(255, 255, 255, 1)',
    },
  },
  legend: { show: false },
  grid: { left: '22%', right: '12%', top: '5%', bottom: '3%' },
  xAxis: [
    {
      splitLine: { show: false },
      type: 'value',
      show: false,
      axisLine: {
        //x轴坐标轴，false为隐藏，true为显示
        show: false,
      },
    },
  ],
  yAxis: [
    {
      show: true,
      splitLine: { show: false },
      axisLine: { show: false },
      type: 'category',
      axisTick: { show: false },
      inverse: true,
      axisLabel: { show: false },
    },
    {
      type: 'category',
      inverse: true,
      axisTick: 'none',
      axisLine: 'none',
      show: true,
      axisLabel: {
        color: '#fff',
        fontSize: 12,
        formatter: function (value, index) {
          return value + diff[index].unit
        },
      },
      data: diff,
    },
  ],
  series: [
    {
      show: true,
      name: '',
      type: 'bar',
      data: diff,
      barWidth: 5, // 柱子宽度
      showBackground: true,
      label: {
        show: true,
        width: 200,
        offset: [0, 0],
        color: '#C4EAFF',
        fontSize: 12,
        fontWeight: 500,
        position: 'left',
        formatter: function (params) {
          return params.data.name
        },
      },
      itemStyle: {
        show: true,
        borderRadius: [10, 10, 10, 10],
        color: {
          type: 'linear',
          colorStops: [
            { offset: 1, color: 'rgba(255,210,143, 1)' },
            { offset: 0, color: 'rgba(255,210,143, 0)' },
          ],
        },
      },
      emphasis: { disabled: true },
    },
    {
      name: '',
      type: 'scatter',
      emphasis: { scale: false },
      symbol: 'rect',
      symbolSize: [0, 0], // 进度条白点
      itemStyle: {
        show: true,
        color: '#FFF',
        // shadowColor: 'rgba(255, 255, 255, 0.5)',
        shadowBlur: 5,
        borderWidth: 1,
        opacity: 1,
      },
      z: 2,
      data: diff,
      animationDelay: 500,
    },
  ],
}

const classificationChartRef = ref()

const getWaringTypeData = () => {
  getScreenAlterDetail({
    type: dateSelect.value,
  }).then((res) => {
    if (res.success) {
      // console.log(res.data)
      const data = res.data?.map((item) => {
        return {
          name: item.content,
          value: item.messagecount || 0,
          unit: '',
        }
      })
      classificationOptions.yAxis[1].data = data
      classificationOptions.yAxis[1].axisLabel.formatter = function (
        value,
        index,
      ) {
        return value + data[index].unit
      }
      classificationOptions.series[0].data = data
      classificationOptions.series[1].data = data
      classificationChartRef.value?.updateOption(classificationOptions)
    } else {
      ElMessage.error(res.message)
    }
  })
}

const trendChartRef = ref(null)

const trendOptions = {
  backgroundColor: 'transparent',
  //你的代码
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(13, 64, 71, 0.50)',
    borderColor: 'rgba(143, 225, 252, 0.60)',
    padding: 8,
    textStyle: {
      color: '#fff',
    },
  },
  legend: {
    data: ['危房报警', '边坡报警', '安防事件报警'],
    icon: 'rect',
    right: '3%',
    top: '5%',
    itemWidth: 12,
    itemHeight: 12,
    textStyle: {
      fontSize: 14,
      color: '#FFFFFF',
    },
  },
  grid: {
    left: '12%',
    right: '2%',
    bottom: '30',
    top: '25%',
  },
  xAxis: [
    {
      type: 'category',
      data: ['2.1', '2.2', '2.3', '2.4', '2.5', '2.6', '2.7'],
      boundaryGap: false,
      axisPointer: {
        type: 'shadow',
      },
      axisLabel: {
        interval: 0,
        rotate: 30,
        color: '#F5F5F5', //更改坐标轴文字颜色
        fontSize: 12, //更改坐标轴文字大小
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        color: '#F5F5F5', //更改坐标轴文字颜色
        fontSize: 12, //更改坐标轴文字大小
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(30, 48, 63, 1)',
          type: 'dashed',
        },
      },
    },

    // 折线部分
    {
      type: 'value',
      name: '',
      axisLabel: {
        show: false,
        color: '#F5F5F5', //更改坐标轴文字颜色
        fontSize: 12, //更改坐标轴文字大小
        formatter: '{value} %',
      },
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: '危房报警',
      type: 'line',
      showSymbol: false,
      itemStyle: {
        shadowColor: '#fff',
        shadowBlur: 5,
        color: '#50FEA3',
      },
      lineStyle: {
        width: 1,
        color: '#50FEA3',
      },
      areaStyle: {
        width: 4,
        // opacity: 0.1,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(80,254,163, 1)' },
            { offset: 1, color: 'rgba(80,254,163, 0.1)' },
          ],
          global: false,
        },
      },
      // 实现数字展示在柱状图
      label: {
        show: false,
        position: 'top',
        fontSize: 12,
        color: '#F5F5F5',
        offset: [0, -10],
        formatter: '{c}', //添加单位
      },
      data: [],
    },
    {
      name: '边坡报警',
      type: 'line',
      showSymbol: false,
      itemStyle: {
        shadowColor: '#fff',
        shadowBlur: 5,
        color: '#FF6059',
      },
      lineStyle: {
        width: 1,
        color: '#FF6059',
      },
      areaStyle: {
        width: 4,
        // opacity: 0.1,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(255,96,89, 1)' },
            { offset: 1, color: 'rgba(255,96,89, 0.1)' },
          ],
          global: false,
        },
      },
      label: {
        show: false,
        position: 'top',
        fontSize: 12,
        color: '#F5F5F5',
        offset: [0, -10],
        formatter: '{c}', //添加单位
      },
      data: [],
    },
    {
      name: '安防事件报警',
      type: 'line',
      showSymbol: false,
      itemStyle: {
        shadowColor: '#fff',
        shadowBlur: 5,
        color: '#FAB54F',
      },
      lineStyle: {
        width: 1,
        color: '#FAB54F',
      },
      areaStyle: {
        width: 4,
        // opacity: 0.1,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 1, color: 'rgba(0,0,0, 1)' },
            { offset: 0, color: 'rgba(250,181,79, 1)' },
          ],
          global: false,
        },
      },
      label: {
        show: false,
        position: 'top',
        color: '#F5F5F5',
        formatter: '{c}%', //添加单位
      },
      data: [],
    },
  ],
}

const dateSelect = ref('today')

watch(
  () => dateSelect.value,
  (val) => {
    if (val) {
      getWaringTypeData()
    }
  },
)

const itemWidth = ref(420)
const current = ref(0)
const panelRef = ref()
const timer = ref({})
const showMove = ref(true)
const currentParkName = ref('')
// 自动滚动
const autoScoll = () => {
  if (!panelRef.value) {
    return
  }
  showMove.value = true
  current.value += 1
  currentParkName.value = parkList.value[current.value].name
  panelRef.value.style.left = -(current.value * 420) + 'px'
  const currentId = parkList.value[current.value].id
  if (currentId) {
    getWarnTendencyList(currentId)
    getDeviceTypeList(currentId)
  }

  if (current.value === parkList.value.length / 2) {
    setTimeout(() => {
      showMove.value = false
      current.value = 0
      panelRef.value.style.left = '0px'
      timer.value = setTimeout(() => {
        autoScoll()
      }, 1000)
    }, 2000)
  } else {
    timer.value = setTimeout(() => {
      autoScoll()
    }, 3000)
  }
}
// 手动滚动
const handleScoll = (op) => {
  if (op === 'left') {
    if (current.value === 0) {
      showMove.value = false
      current.value = parkList.value.length / 2
      panelRef.value.style.left = -(current.value * 420) + 'px'

      setTimeout(() => {
        showMove.value = true
        current.value -= 1
        currentParkName.value = parkList.value[current.value].name
        panelRef.value.style.left = -(current.value * 420) + 'px'
      }, 100)
    } else {
      showMove.value = true
      current.value -= 1
      currentParkName.value = parkList.value[current.value].name
      panelRef.value.style.left = -(current.value * 420) + 'px'
    }
  } else {
    if (current.value === parkList.value.length / 2) {
      showMove.value = false
      current.value = 0
      panelRef.value.style.left = '0px'
      setTimeout(() => {
        showMove.value = true
        current.value += 1
        currentParkName.value = parkList.value[current.value].name
        panelRef.value.style.left = -(current.value * 420) + 'px'
      }, 100)
    } else {
      showMove.value = true
      current.value += 1
      currentParkName.value = parkList.value[current.value].name
      panelRef.value.style.left = -(current.value * 420) + 'px'
    }
  }

  const currentId = parkList.value[current.value].id
  if (currentId) {
    getWarnTendencyList(currentId)
    getDeviceTypeList(currentId)
  }
}
// 手动切换
const handleChange = (op) => {
  showMove.value = false
  clearTimeout(timer.value)
  handleScoll(op)
  timer.value = setTimeout(() => {
    autoScoll()
  }, 3000)
}

const getParKList = () => {
  // parkList.value = [
  //   {
  //     id: 'caijia',
  //     name: '蔡家',
  //   },
  //   {
  //     id: 'xiema',
  //     name: '歇马',
  //   },
  //   {
  //     id: 'sanhuashi',
  //     name: '三花石',
  //   },
  //   {
  //     id: 'caijia',
  //     name: '蔡家',
  //   },
  //   {
  //     id: 'xiema',
  //     name: '歇马',
  //   },
  //   {
  //     id: 'sanhuashi',
  //     name: '三花石',
  //   },
  // ]
  parkList.value = []
  parkPageList({
    pageSize: 999,
  }).then((res) => {
    if (res.success) {
      const list =
        res.data?.list?.map((item, index) => {
          return {
            name: item.name,
            id: item.pkid,
          }
        }) || []
      parkList.value = list.concat(list)
      console.log('parkList.value---', parkList.value)
      if (panelRef.value) {
        panelRef.value.style.width =
          parkList.value.length * itemWidth.value + 'px'
      }
      currentParkName.value = parkList.value[0].name
      getWarnTendencyList(parkList.value[0].id)
      getDeviceTypeList(parkList.value[0].id)
      setTimeout(() => {
        autoScoll()
      }, 3000)
    } else {
      ElMessage.error(res.message)
    }
  })
}

const getDeviceTypeList = (id) => {
  const params = {
    parkId: id,
  }
  getDeviceTypeStatistic(params).then((res) => {
    if (res.data) {
      deviceOptions.xAxis.data = res.data.map((item) => {
        return item.content
      })
      deviceOptions.series[0].data = res.data.map((item) => {
        return item.devicecount
      })
    } else {
      deviceOptions.xAxis[0].data = []
      deviceOptions.series[0].data = []
    }
    nextTick(() => {
      if (deviceChartRef.value && deviceChartRef.value[current.value]) {
        deviceChartRef.value[current.value]?.updateOption(deviceOptions)
      }
    })
  })
}

const getWarnTendencyList = (id) => {
  trendOptions.xAxis[0].data = formattedDates
  const params = {
    parkId: id,
  }
  getWarnTendency(params).then((res) => {
    const house = res.data['危房报警']
    const slope = res.data['边坡报警']
    const safe = res.data['安防事件报警']
    house
      ? (trendOptions.series[0].data = setData(house))
      : (trendOptions.series[0].data = [])
    slope
      ? (trendOptions.series[1].data = setData(slope))
      : (trendOptions.series[1].data = [])
    safe
      ? (trendOptions.series[2].data = setData(safe))
      : (trendOptions.series[2].data = [])
    nextTick(() => {
      if (trendChartRef.value && trendChartRef.value[current.value]) {
        trendChartRef.value[current.value]?.updateOption(trendOptions)
      }
    })
  })
}

const setData = (arr) => {
  const datas = arr.map((item) => {
    return {
      day: item.yearmonthday.substring(5),
      count: item.devicecount,
    }
  })
  let result = []
  formattedDates.forEach((item) => {
    const value = datas.find((i) => i.day === item)?.count
    value > -1 ? result.push(value) : result.push(0)
  })
  return result
}

const handleInfoItemClick = (index) => {
  if (index !== 0) {
    return
  }
  if (!Number(eventInfoList.value[index].value)) {
    ElMessage.error('无报警数据')
    return
  }
  mitter.emit('showAlarmEvent')
}

onMounted(() => {
  getParKList()
  getEventInfoListData()
  getWaringTypeData()
})
onUnmounted(() => {
  clearTimeout(timer.value)
})
</script>

<template>
  <div :class="['left', isExpanded ? 'active' : '']">
    <card name="报警事件统计" class="police-event">
      <template #title>
        <i class="title-icon"></i>
      </template>
      <div class="statistic">
        <div class="left-icon"></div>
        <div class="right-info">
          <div
            class="info-item"
            v-for="(item, index) in eventInfoList"
            :key="index"
            :class="{ clickable: index === 0 }"
            @click="handleInfoItemClick(index)"
          >
            <div class="name">{{ item.name }}</div>
            <div class="value-area">
              <span class="value" :style="{ color: item.color }">{{
                item.value
              }}</span>
              <span class="unit">起</span>
            </div>
          </div>
        </div>
      </div>
      <div class="classification">
        <div class="statistic-title">
          <div class="title-area">
            <!-- <i class="icon"></i> -->
            <span class="title">报警分类</span>
          </div>
          <div class="right-area">
            <div class="right-tabs">
              <div
                class="right-tab"
                :class="dateSelect == 'today' ? 'is-active' : ''"
                @click="dateSelect = 'today'"
              >
                本日
              </div>
              <div
                class="right-tab"
                :class="dateSelect == 'month' ? 'is-active' : ''"
                @click="dateSelect = 'month'"
              >
                本月
              </div>
              <div
                class="right-tab"
                :class="dateSelect == 'year' ? 'is-active' : ''"
                @click="dateSelect = 'year'"
              >
                本年
              </div>
            </div>
            <!-- <el-radio-group v-model="dateSelect">
              <el-radio-button label="today">本日</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="year">本年</el-radio-button>
            </el-radio-group> -->
          </div>
        </div>
        <div class="classification-chart">
          <draw-echarts
            ref="classificationChartRef"
            width="400"
            height="200"
            :options="classificationOptions"
          ></draw-echarts>
        </div>
      </div>
    </card>
    <card name="设备分类统计" class="device-statistics">
      <template #title>
        <i class="title-icon"></i>
      </template>
      <template #right>
        <div class="park">
          <el-icon @click="handleChange('left')"><CaretLeft /></el-icon>
          <span>{{ currentParkName }}</span>
          <el-icon @click="handleChange('right')"><CaretRight /></el-icon>
        </div>
      </template>
      <div class="device-wrapper">
        <div
          class="device-content"
          :class="{ active: !showMove }"
          ref="panelRef"
        >
          <div v-for="(item, index) of parkList" :key="index">
            <div class="device">
              <div class="statistic-title">
                <div class="title-area">
                  <span class="title">设备分类统计</span>
                </div>
                <div class="right-area"></div>
              </div>
              <div class="device-chart">
                <draw-echarts
                  ref="deviceChartRef"
                  width="400"
                  height="220"
                  :options="deviceOptions"
                ></draw-echarts>
              </div>
            </div>
            <div class="trend">
              <div class="statistic-title">
                <div class="title-area">
                  <span class="title">报警趋势（近10日）</span>
                </div>
                <div class="right-area"></div>
              </div>
              <div class="trend-chart">
                <draw-echarts
                  ref="trendChartRef"
                  width="400"
                  height="200"
                  :options="trendOptions"
                ></draw-echarts>
              </div>
            </div>
          </div>
        </div>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.left {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .device-statistics {
    // background-image: url('@/assets/imgs/box_sbfltj.png');
    height: 531px;
    margin-bottom: var(--card-margin-bottom);

    .title-icon {
      width: 142px;
      background-image: url('@/assets/imgs/sbbj_title.png');
    }

    .statistic-title {
      display: flex;
      justify-content: space-between;

      .title-area {
        display: flex;
        height: 16px;
        align-items: center;
        width: 230px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url('@/assets/imgs/img_fbt.png');
        padding-left: 20px;

        // .icon {
        //   width: 16px;
        //   height: 16px;
        //   background-size: 100% 100%;
        //   background-repeat: no-repeat;
        //   background-image: url('@/assets/imgs/img_xbt.png');
        // }

        .title {
          font-family: Source Han Sans SC;
          font-weight: 500;
          color: #fff;
          font-weight: bold;
          font-size: 16px;
          color: #00a6ff;
          background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          margin-bottom: 5px;
        }
      }

      .right-area {
        .right-tabs {
          background-image: url('@/assets/imgs/tab_d.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          height: 32px;
          width: 147px;
          display: flex;

          .right-tab {
            height: 100%;
            width: 33%;
            text-align: center;
            font-family: Source Han Sans SC;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            line-height: 32px;
            cursor: pointer;
          }

          .is-active {
            background-image: url('@/assets/imgs/tab_sel.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }

        // :deep(.el-radio-group) {
        //   .el-radio-button {
        //     --el-radio-button-checked-border-color: #0066d9;
        //   }

        //   .el-radio-button.is-active {
        //     color: white;

        //     .el-radio-button__inner {
        //       color: white;
        //       background-image: url('@/assets/imgs/tab_sel.png');
        //       background-repeat: no-repeat;
        //       background-size: 100% 100%;
        //     }
        //   }

        //   .el-radio-button__inner {
        //     border-color: rgba(41, 88, 147, 1);
        //     height: 32px;
        //     width: 48px;
        //     --el-border-radius-base: 0;
        //     --el-fill-color-blank: rgba(0, 31, 54, 1);
        //     --el-button-bg-color: rgba(0, 31, 54, 1);
        //     display: flex;
        //     align-items: center;
        //     justify-content: center;
        //     color: rgba(147, 181, 201, 1);

        //     .svg-icon {
        //       width: 16px;
        //       height: 14px;
        //     }
        //   }
        // }
      }
    }
    .park {
      display: flex;
      align-items: center;
      .el-icon {
        color: #729bfc;
        cursor: pointer;
      }
      span {
        width: 100px;
        color: #ffffff;
        font-size: 14px;
        text-align: center;
      }
    }
    .device-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      overflow: hidden;
      position: relative;
    }
    .device-content {
      padding-top: 10px;
      display: flex;
      overflow: hidden;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      transition: 1s all linear;
      &.active {
        transition: none;
      }
    }
    .trend {
      margin-top: 10px;

      .statistic-title {
        margin-left: 19px;
      }
    }

    .device {
      .statistic-title {
        margin-left: 19px;
      }
      .device-chart {
        padding: 0 10px;
      }
    }
  }

  .police-event {
    // background-image: url('@/assets/imgs/box_bjsjtj.png');
    height: 413px;

    .title-icon {
      width: 152px;
      background-image: url('@/assets/imgs/bjsjtj_title.png');
    }

    .statistic {
      margin-left: 19px;
      width: 95%;
      height: 100px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url('@/assets/imgs/img_bj.png');

      display: flex;
      align-items: center;

      .left-icon {
        width: 80px;
      }

      .right-info {
        width: calc(100% - 80px);
        height: 100%;
        color: white;
        align-items: center;
        display: flex;
        justify-content: space-around;
        margin-top: 5px;

        .name {
          margin-bottom: 8px;
          font-size: 12px;
        }

        .value {
          margin-right: 4px;
          font-size: 24px;
        }

        .unit {
          font-size: 12px;
          color: #c4eaff;
        }

        .info-item.clickable {
          cursor: pointer;
        }
      }
    }

    .statistic-title {
      display: flex;
      justify-content: space-between;

      .title-area {
        display: flex;
        height: 16px;
        align-items: center;
        width: 230px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url('@/assets/imgs/img_fbt.png');
        padding-left: 20px;

        // .icon {
        //   width: 16px;
        //   height: 16px;
        //   background-size: 100% 100%;
        //   background-repeat: no-repeat;
        //   background-image: url('@/assets/imgs/img_xbt.png');
        // }

        .title {
          font-family: Source Han Sans SC;
          font-weight: 500;
          color: #fff;
          font-weight: bold;
          font-size: 16px;
          color: #00a6ff;
          background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          margin-bottom: 5px;
        }
      }

      .right-area {
        .right-tabs {
          background-image: url('@/assets/imgs/tab_d.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          height: 32px;
          width: 147px;
          display: flex;

          .right-tab {
            height: 100%;
            width: 33%;
            text-align: center;
            font-family: Source Han Sans SC;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            line-height: 32px;
            cursor: pointer;
          }

          .is-active {
            background-image: url('@/assets/imgs/tab_sel.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }

        // :deep(.el-radio-group) {
        //   .el-radio-button {
        //     --el-radio-button-checked-border-color: #0066d9;
        //   }

        //   .el-radio-button.is-active {
        //     color: white;

        //     .el-radio-button__inner {
        //       color: white;
        //       background-image: url('@/assets/imgs/tab_sel.png');
        //       background-repeat: no-repeat;
        //       background-size: 100% 100%;
        //     }
        //   }

        //   .el-radio-button__inner {
        //     border-color: rgba(41, 88, 147, 1);
        //     height: 32px;
        //     width: 48px;
        //     --el-border-radius-base: 0;
        //     --el-fill-color-blank: rgba(0, 31, 54, 1);
        //     --el-button-bg-color: rgba(0, 31, 54, 1);
        //     display: flex;
        //     align-items: center;
        //     justify-content: center;
        //     color: rgba(147, 181, 201, 1);

        //     .svg-icon {
        //       width: 16px;
        //       height: 14px;
        //     }
        //   }
        // }
      }
    }

    .classification {
      margin-top: 14px;

      .statistic-title {
        margin-left: 19px;
        margin-right: 25px;
      }
    }

    .trend {
      margin-top: 10px;

      .statistic-title {
        margin-left: 19px;
      }
    }
  }
}
</style>
